Suppose I have a class and an each method like the following:
var dog {
breed: "huskey",
function printBreed(){
$("ul li").each(function() {
$(this).html() = dog.breed;
});
}
}
I made each of the list item of the page display "huskey". However, inside the each function, I can't use $(this).html() = this.breed;. Because, this will refer to the list item "li" itself. Besides, calling the object by its name. Is there a generic way to refer to the object like "this".
First, let’s refer to a corrected version of your code:
const dog = { // Use `const` instead of `var`; `=` was missing.
breed: "Husky", // Spelling.
printBreed(){ // `function` is invalid here, so use a method instead.
$("ul li").each(function(){
$(this).html(dog.breed); // Assignment to a method call is invalid; `html` accepts an argument to set the value.
})
}
};
The callback function of jQuery’s each is called with this bound to the currently iterated element. Obviously, this cannot refer to both your element and your dog object at the same time.
The each callback receives two arguments: the current index, and the currently iterated element. In order to ignore the this binding from jQuery, simply use an arrow function instead of a function function. this will then be taken from lexical scope. See How does the “this” keyword work? and How to access the correct this inside a callback for more details.
The working code with jQuery would look like this:
const dog = {
breed: "Husky",
printBreed(){
$("ul li").each((index, element) => $(element).html(dog.breed));
}
};
dog.printBreed();
Note that an each loop isn’t necessary in your case. You could’ve simply written the code like so:
const dog = {
breed: "Husky",
printBreed(){
$("ul li").html(this.breed);
}
};
dog.printBreed();
Even better: use .text instead of .html. Setting HTML for plain text is overkill.
Even if the breed was different for each <li>, .html accepts a function callback. But, you know, use arrow functions as appropriate.
Of course, You Don’t Need jQuery, so a vanilla version looks like this:
const dog = {
breed: "Husky",
printBreed(){
document.querySelectorAll("ul li").forEach((element) => element.textContent = this.breed);
}
}
dog.printBreed();
You can store a reference:
var dog {
breed: "huskey",
function printBreed(){
var self = this;
$("ul li").each(function() {
$(this).html() = self.breed;
});
}
}
This question has been on my mind too, I resolved to doing
var dog {
breed: "huskey",
function printBreed(){
classThis = this
$("ul li").each(function() {
$(this).html() = classThis.breed;
});
}
}